<template>
	<view class="container">
		<image class="bg" mode="widthFix"
			src="https://mh.synhaier.com/uploads/upload/index/2024/08/13/e3783a700612f0fb7093db3494d7650e.png"></image>
		<view class="head">
			<image class="head-bg" mode="widthFix"
				src="https://mh.synhaier.com/uploads/upload/index/2024/08/15/8b0353836510bd15f7e0228a4c94977e.png">
			</image>
			<view class="top">
				<image class="bzrd" mode="widthFix"
					src="https://mh.synhaier.com/uploads/upload/index/2024/08/13/3d76b080d37ad68e973d4767918079db.png">
				</image>
				<view class="top-go">
					精彩更多
					<image class="go" mode="widthFix" src="../../static/mh/go.png"></image>
				</view>
			</view>
			<scroll-view scroll-x="true" class="scrollX">
				<view class="list">
					<view class="li" v-for="item in hot" :key="item" @click="toDetail(item)">
						<image class="li-img" :src="item.thumb"></image>
						<view class="li-info">
							<view class="li-name">{{ item.title }}</view>
							<view class="li-price">￥{{ item.price }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="tabs">
			<view class="tab" @click="navYsf(item.id, item)" v-for="item in cates" :key="item.id">
				<image class="tab-img" mode="widthFix" :src="item.thumb"> </image>
				<text>{{ item.title }}</text>
			</view>
		</view>
		<scroll-view class="good-scroll" scroll-y="true" v-if="listData && listData.length > 0">
			<view class="goods" v-for="item in listData" :key="item.cat_id">
				<view class="goods-head" @click="navYsf(item.cat_id, item)">
					<image class="good-t-img" mode="widthFix" :src="item.row"> </image>
					<image class="good-go" mode="widthFix"
						src="https://mh.synhaier.com/uploads/upload/index/2024/08/14/71a952250b32c40d1ec507d56b51b23b.png">
					</image>
				</view>
				<view class="goods-list">
					<view class="good" v-for="cur in item.list" :key="cur.id" @click="toDetail(cur)">
						<image class="good-img" :src="cur.thumb"></image>
						<view class="good-info">
							<view class="good-name overflowText1">{{ cur.title }}</view> -->
							<!-- <view class="good-sku overflowText1">{{}}</view> -->
							<view class="good-price"> ￥{{ cur.price }} </view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="coupon" type="center">
			<view class="coupon-content">
				<image class="bgi"
					src="https://mh.synhaier.com/uploads/upload/index/2024/09/25/ef9ffccd5cad01c67c37005ab9ca4085.png">
				</image>
				<image class="btn" mode="widthFix" @click="getCoupon"
					src="https://mh.synhaier.com/uploads/upload/index/2024/09/25/e262b1b10a00fb4e023dfbf6c92b27da.png">
				</image>
				<scroll-view :scroll-y="true" class="list">

					<view class="li" v-for="item in couponlist" :key="item">
						<view class="left">
							<view class="count"><text>￥</text>{{item}}</view>
							<view class="txt">优惠券</view>
						</view>
						<view class="right">
							<view class="title">{{item}}元优惠券</view>
							<view class="type">
								全场通用
							</view>
							<view class="time">领取后48小时内有效</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageSize: 20,
				pageNo: 1,
				listData: [],
				cates: [],
				hot: [],
				couponlist: []
			};
		},
		onLoad(options) {

			const {
				invite_code
			} = options;
			uni.setStorageSync("invite_code", invite_code);
			this.getList();
		},
		onShow() {
			this.canCoupons();
		},
		onShareAppMessage() {
			return {
				imageUrl: "https://mh.synhaier.com/uploads/upload/index/2024/08/17/0853af63b0e4fe8d57ab7bfffdf18b4d.png",
				title: "邀请好友得豪礼",
				path: "/pages/index/index?invite_code=" +
					(uni.getStorageSync("userInfo") ?
						uni.getStorageSync("userInfo").invite_code :
						""),
			};
		},
		methods: {
			getCouponList() {
				const _this = this
				this.req({
					url: "/v1/box/ListCoupon",
					data: {},
					Loading: true,
					success(res) {
						if (res.code == 200) {
							console.log(res.data, "aaaaaa");
							_this.couponlist = res.data
						}
					},
				});
			},
			canCoupons() {
				const _this = this;
				this.req({
					url: "/v1/box/coupon",
					data: {},
					Loading: true,
					success(res) {
						if (res.code == 200) {
							console.log(res, "aaaaaa");
							if (res.data != 0) {
								_this.getCouponList()
								_this.$refs.coupon.open('center')
								// uni.showModal({
								// 	title: "提示",
								// 	content: "您有一个待领取的优惠券，是否领取？",
								// 	confirmText: "立即领取",
								// 	cancelText: "放弃",
								// 	success(res) {
								// 		if (res.confirm) {
								// 			_this.getCoupon();
								// 		} else {}
								// 	},
								// });
							}
						}
					},
				});
			},
			getCoupon() {
				const _this = this
				this.req({
					url: "/v1/box/getCoupon",
					data: {},
					Loading: true,
					success: (res) => {
						if (res.code == 200) {
							console.log(res, "aaaaaa");
							uni.showToast({
								title: "领取成功！",
								icon: "none",
							});
							_this.$refs.coupon.close()
						}
					},
				});
			},
			/**
			 * @description: 前往盒子详情
			 * @param {*} item
			 * @param {*} i
			 * @return {*}
			 */
			toDetail(item) {
				this.$common.to({
					url: "/package/index/choujiang",
					query: {
						id: item.id,
					},
				});
			},
			getList() {
				this.req({
					url: "/v1/box/hot",
					data: {},
					Loading: true,
					success: (res) => {
						if (res.code == 200) {
							this.hot = res.data;
						}
					},
				});
				this.req({
					url: "/v1/box/cate",
					data: {},
					Loading: true,
					success: (res) => {
						console.log(res, "this.listData");
						if (res.code == 200) {
							this.cates = res.data;
						}
					},
				});
				this.req({
					url: "/v1/box/list",
					data: {
						page: this.pageNo,
						per_page: this.pageSize,
					},
					Loading: true,
					success: (res) => {
						console.log(res, "this.listData");
						if (res.code == 200) {
							if (this.pageNo == 1) {
								this.listData = [];
							}
							let keys = Object.keys(res.data.new_data);
							for (let key of keys) {
								let value = res.data.new_data[key];
								this.listData = [...this.listData, value];
							}
							/* this.listData = [...this.listData, res.data.new_data['10'], res.data.new_data[
								'11']] */
						}
					},
				});
			},
			navYsf(id, item) {
				uni.navigateTo({
					url: "/package/index/yishangfan?id=" + id + "&title=" + item.title,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		overflow-x: hidden;
		// background-color: #000;
		background-color: white;
		position: relative;
		color: #fff;

		.bg {
			width: 100%;
			height: 428rpx;
			position: absolute;
			left: 0;
			top: 0;
		}

		.head {
			position: relative;

			.head-bg {
				//    width: 100%;
				width: 110%;
				position: absolute;
				left: -5%;
				top: 0;
			}

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				z-index: 2;
				padding: 30rpx 0 0 20rpx;
				box-sizing: border-box;

				.bzrd {
					width: 328rpx;
				}

				.top-go {
					display: flex;
					align-items: center;

					.go {
						width: 38.96rpx;
					}
				}
			}

			.scrollX {
				height: 300rpx;

				.list {
					height: 100%;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					margin-right: 60rpx;
					padding-left: 20rpx;
					padding-top: 80rpx;

					.li {
						width: 384rpx;
						height: 150rpx;
						background: #ffffff;
						border-radius: 12rpx;
						display: flex;
						padding: 0 16rpx;
						box-sizing: border-box;
						margin-right: 20rpx;

						.li-img {
							width: 126rpx;
							height: 170rpx;
							box-shadow: 0rpx 6rpx 20rpx rgba(0, 0, 0, 0.2);
							border-radius: 14rpx;
							margin-top: -50rpx;
							margin-right: 20rpx;
						}

						.li-info {
							display: flex;
							flex-direction: column;
							justify-content: space-around;

							.li-name {
								width: 168rpx;
								height: 40rpx;
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								color: #000000;
								line-height: 32rpx;
							}

							.li-price {
								width: 80rpx;
								height: 50rpx;
								font-family: DIN BlackAlternate;
								font-weight: 400;
								font-size: 40rpx;
								color: #ff1d1d;
								line-height: 32rpx;
							}
						}
					}
				}
			}
		}

		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 40rpx;

			.tab {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.tab-img {
					margin-bottom: 20rpx;
					width: 100rpx;
				}

				text {
					height: 36rpx;
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 26rpx;
					// color: #FFFFFF;
					color: #000;
					line-height: 32rpx;
				}
			}
		}

		.good-scroll {
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			background: #f2f2f2;
			padding-top: 40rpx;
			margin-top: 40rpx;

			.goods {
				width: 750rpx;
				padding: 0 30rpx 30rpx;
				box-sizing: border-box;

				.goods-head {
					margin-bottom: 14rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.good-t-img {
						width: 345rpx;
					}

					.good-go {
						width: 60.25rpx;
					}
				}

				.goods-list {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.good {
						width: 330rpx;
						height: 440rpx;
						background: #ffffff;
						border-radius: 16rpx;
						margin-bottom: 20rpx;

						.good-img {
							width: 330rpx;
							height: 288rpx;
							border-radius: 16rpx 16rpx 0rpx 0rpx;
						}

						.good-info {
							padding: 12rpx 16rpx;
							box-sizing: border-box;

							.good-name {
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								color: #000000;
								line-height: 32rpx;
							}

							.good-sku {
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 20rpx;
								color: #999999;
								line-height: 32rpx;
								margin-bottom: 14rpx;
							}

							.good-price {
								font-family: DIN BlackAlternate;
								font-weight: 400;
								font-size: 36rpx;
								color: #ff1d1d;
								line-height: 32rpx;
							}
						}
					}
				}
			}
		}
	}

	.coupon-content {
		width: 80vw;
		height: 70vh;

		.bgi {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.btn {
			width: 70%;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translate(-50%, 50%);
			z-index: 2;
		}

		.list {
			width: 90%;
			height: 55%;
			position: absolute;
			left: 50%;
			top: 35%;
			transform: translateX(-50%);
			position: relative;
			z-index: 3;

			.li {
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.left {
					width: 35%;
					border-right: 1rpx dashed #ddd;
					color: #da250f;
					text-align: center;

					.count {
						font-size: 44rpx;
						font-weight: bold;

						text {
							font-size: 26rpx;
						}
					}

					.txt {
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

				.right {
					width: 65%;
					padding-left: 20rpx;
					box-sizing: border-box;

					.title {
						font-size: 28rpx;
						color: #000;
					}

					.type {
						width: 100rpx;
						margin: 10rpx 0;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 30rpx;
						border: 1rpx solid #d09069;
						color: #d09069;
						padding: 0rpx 10rpx;
						font-size: 20rpx;
					}

					.time {
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>